<!--  -->
<template>
  <div class="mytodo">
    <!-- 头部开始 -->
    <div class="mytodo-head">
      <h1>todos</h1>
    </div>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <div class="mytodo-content">
      <!-- 上部分的开始 -->
      <div class="mytodo-content-top">
        <div class="content-top-left">
          <span :class="{ allchecked: AllChecked }" @click="allChecked">></span>
        </div>
        <div class="content-top-right">
          <input
            type="text"
            placeholder="what needs to be done?"
            @keyup.enter="addList"
            v-model="inputVal"
            v-focus
          />
        </div>
        <!-- 上部分的结束 -->
      </div>
      <!-- 中间部分开始 -->
      <div class="mytodo-content-mid">
        <div class="content-list">
          <div
            class="mid-list-item"
            v-for="(item, index) in filterTodos"
            :key="item.id"
          >
            <div class="content-mid-left">
              <input type="checkbox" v-model="item.status" />
            </div>
            <div
              :class="['content-mid', { 'content-mid-update': item.status }]"
              @dblclick="updateText(index)"
            >
              <span :class="{ hidden: edit_index === index }">{{ item.text }}</span>
              <input
                :class="{ hidden: edit_index !== index }"
                type="text"
                v-model="item.text"
                @blur="blurfocus"
              />
            </div>
            <div class="content-mid-right" @click="delTodo(index)">X</div>
          </div>
        </div>
      </div>
      <!-- 中间部分结束 -->
      <!-- 底部部分开始 -->
      <div class="mytodo-content-bottom">
        <div class="content-bottom-left">{{countActive}} 剩余</div>
        <div class="content-bottom-mid">
          <div @click="handleChange('all')" :class="['bottom-mid-left',{'borderBox':activeTab==='all'}]">全部</div>
          <div @click="handleChange('active')" :class="['bottom-mid-middle',{'borderBox':activeTab==='active'}]">活动</div>
          <div @click="handleChange('completed')" :class="['bottom-mid-right',{'borderBox':activeTab==='completed'}]">完成</div>
        </div>
        <div class="content-bottom-right" @click="deleteCompleted">删除已完成</div>
      </div>
      <!-- 底部部分结束 -->
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      edit_index:-1,//-1 表示没有编辑 0或其他数字表示正在编辑
      activeTab:"all",
      inputVal: "", //头部input的值
      todos: JSON.parse(localStorage.getItem("todos") || '[]')
      /*[
        {
          text: "吃饭",
          status: true, //状态 active=>false    completed=>true
          id: 1,
        },
        {
          text: "睡觉",
          status: false, //状态 active=>false    completed=>true
          id: 2,
        } 
      ],*/
    }
  },
  //监听属性 类似于data概念
  computed: {
    //全选与单选相关联
    AllChecked: function () {
      let checked = true;
      //遍历todos
      this.todos.map((v) => {
        if (!v.status) {
          checked = false;
        }
      });
      return checked;
    },
    //过滤todos
    filterTodos:function(){
      if(this.activeTab === "all"){
        return this.todos;
      }else if(this.activeTab === "active"){
        //未完成 status=>false
        return this.todos.filter(v=>{
          return !v.status;
        })
      }else if(this.activeTab === "completed"){
        //完成态 status=>true
        return this.todos.filter(v=>{
          return v.status;
        })
      }
    },
    countActive:function(){
      let newTodos = this.todos.filter(v=>{
        return !v.status;
      });
      return newTodos.length;
    }
  },
  //监控data中的数据变化
  watch: {
    todos:{
      handler:function(newTodos){
        localStorage.setItem("todos",JSON.stringify(newTodos));
      },
      deep:true
    }
  },
  //方法集合
  methods: {
    //添加todos
    addList: function () {
      //判断输入是否为空
      if (!this.inputVal) {
        this.$message({
          message: "输入不能为空",
          type: "warning",
        });
        return false;
      }
      //将一条新数据push到todos的最后
      this.todos.push({
        text: this.inputVal,
        status: false,
        id: Date.now(),
      });
    },
    //点击全选
    allChecked: function () {
      //创建一个新的todos
      let newTodos = JSON.parse(JSON.stringify(this.todos));
      //遍历todos所有元素
      newTodos.map((v) => {
        //将每个元素的状态status设置为true
        v.status = true;
      });
      //将新的todos赋值给原来的
      this.todos = newTodos;
    },
    //删除todos
    delTodo: function (index) {
      //从index开始下标向后截取一个
      this.todos.splice(index, 1);
    },
    //双击显示修改框
    updateText: function (index) {
      this.edit_index = index;
      // this.dubleclick = true;
      // console.log(this.edit_index);
    },
    //修改框失去焦点
    blurfocus: function () {
      this.edit_index = -1;
    },
    //底部功能模块中间切换
    handleChange:function(activeTab){
      this.activeTab = activeTab;
    },
    //底部功能模块 删除已完成
    deleteCompleted:function(){
      //删除已完成，保存未完成的数据
      let newTodos = this.todos.filter(v=>{
        return !v.status;
      });
      this.todos = newTodos;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  directives:{
    "focus":{
      inserted:function(el){
        el.focus();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.hidden {
  display: none;
}
.mytodo {
  width: 50vw;
  margin: 0 auto;
  min-height: 500px;
  .mytodo-head {
    h1 {
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 70px;
      color: #cccccc;
    }
  }
  .mytodo-content {
    width: 400px;
    border: 1px solid #eeeeee;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 5px;
    .mytodo-content-top {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      .content-top-left {
        flex: 1;
        text-align: center;
        span {
          display: block;
          transform: rotate(90deg);
          color: #bbbbbb;
          cursor: default;
        }
        .allchecked {
          color: black;
        }
      }

      .content-top-right {
        height: 40px;
        padding: 5px;
        flex: 8;
        input {
          width: 100%;
          height: 100%;
          font-size: 16px;
          border: 0;
          outline: none;
        }
      }
    }
    .mytodo-content-mid {
      // min-height: 500px;
      .content-list {
        .mid-list-item {
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-top: 1px solid #eeeeee;
          .content-mid-left {
            flex: 1;
          }

          .content-mid {
            flex: 8;
            text-align: left;
            padding: 5px;
            .title {
              font-size: 16px;
            }
          }
          .content-mid-update {
            color: #dddddd;
            text-decoration: line-through;
          }
          .content-mid-right {
            visibility: hidden;
            flex: 1;
          }
        }
        .mid-list-item:hover {
          .content-mid-right {
            visibility: visible;
            flex: 1;
            cursor: pointer;
          }
        }
      }
    }
    .mytodo-content-bottom {
      height: 40px;
      padding: 0 10px;
      font-size: 12px;
      border-top: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .content-bottom-mid {
        display: flex;
        justify-content: center;
        cursor: default;
        .bottom-mid-left {
          margin-right: 10px;
        }

        .bottom-mid-middle {
          margin-right: 10px;
        }

        .bottom-mid-right {
          margin-right: 10px;
        }
        .borderBox{
          border: 1px solid pink;
        }
      }

      .content-bottom-right {
        cursor: default;
      }
    }
  }
}
</style>
